<template>
  <div class="app-container">
    <div class="filterDiv">
      <label class="label" style="padding-left:0">类别:</label>
      <el-select v-model="listQuery.periodType" placeholder="类别" size="small" @change="typeChange">
        <el-option label="月报" value="1" />
        <el-option label="季报" value="3" />
        <el-option label="上半年报" value="6" />
        <el-option label="年报" value="C" />
      </el-select>
      <label v-if="listQuery.periodType && listQuery.periodType !== '1'" style="margin-left:5px" class="label">年份:</label>
      <el-select v-if="listQuery.periodType && listQuery.periodType !== '1'" v-model="listQuery.periodYear" placeholder="年份" size="small" @change="getData">
        <el-option v-for="item in yearArr" :key="item" :label="item + '年'" :value="item" />
      </el-select>
      <label v-if="listQuery.periodType==3" class="label">季度:</label>
      <el-select v-if="listQuery.periodType==3" v-model="listQuery.quarter" placeholder="季度" size="small" @change="getData">
        <el-option label="一季度" value="1" />
        <el-option label="二季度" value="2" />
        <el-option label="三季度" value="3" />
        <el-option label="四季度" value="4" />
      </el-select>
      <label v-if="listQuery.periodType==1" style="margin-left:5px" class="label">期间:</label>
      <el-select v-if="listQuery.periodType==1" v-model="listQuery.periodCode" placeholder="会计期间" size="small" @change="getData">
        <el-option v-for="item in periodList" :key="item.id" :label="item.text" :value="item.id" />
      </el-select>
      <el-button-group style="float:right;margin-top:5px">
        <el-button type="primary" size="small" round @click="printBook">打印</el-button>
        <el-button type="primary" size="small" round @click="exportBook">导出</el-button>
      </el-button-group>
      <el-button v-permiss="['383030']" size="small" style="float:right;margin-top:5px" round type="primary" @click="$router.push('/report/flowstart')">现金流量期初</el-button>
      <el-button v-permiss="['383040']" size="small" style="float:right;margin-top:5px" round type="primary" @click="toSusbiary">联查明细表</el-button>
    </div>
    <div class="contentDiv">
      <el-table :key="tableKey" v-loading="listLoading" :data="tableData" border fit highlight-current-row style="width: 100%;" size="small">
        <el-empty slot="empty" :image-size="120" />
        <el-table-column label="项目" align="left">
          <template slot-scope="{row}">
            <span>{{ row.cashFlowName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="行次" align="center">
          <template slot-scope="{row}">
            <span>{{ row.lineNo }}</span>
          </template>
        </el-table-column>
        <el-table-column label="本期金额" align="right">
          <template slot-scope="{row}">
            <span>{{ row.periodNetAmount || '' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="本年累计金额" align="right">
          <template slot-scope="{row}">
            <span>{{ row.yearNetAmount || '' }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getFlowData, getPeriodList, printFlowData, exportFlowData } from '@/api/report'
import { getNowMonth, uniqueArr, getPrevMonth, getPrevSeason } from '@/utils/index'
export default {
  name: 'ReportFlow',
  data() {
    return {
      tableKey: 0,
      periodList: [],
      tableData: [],
      total: 0,
      listLoading: true,
      listQuery: {
        periodType: '1',
        periodYear: '',
        quarter: '',
        periodCode: getNowMonth()
      }
    }
  },
  created() {
    getPeriodList().then(res => {
      this.periodList = res.data.data
      const prevMonth = getPrevMonth()
      if (this.periodList.some(it => it.id === prevMonth)) {
        this.listQuery.periodCode = prevMonth
      } else {
        this.listQuery.periodCode = this.periodList.length > 0 ? this.periodList[0].id : ''
      }
      this.getData()
      this.initYearArr()
    })
  },
  methods: {
    toSusbiary() {
      const type = this.listQuery.periodType
      const year = this.listQuery.periodYear
      const quarter = this.listQuery.quarter
      const code = this.listQuery.periodCode
      this.$router.push('/report/subsidiary?type=' + type + '&year=' + year + '&quarter=' + quarter + '&code=' + code)
    },
    typeChange(val) {
      if (val === '1') {
        this.listQuery.periodYear = ''
        this.listQuery.quarter = ''
        const prevMonth = getPrevMonth()
        if (this.periodList.some(it => it.id === prevMonth)) {
          this.listQuery.periodCode = prevMonth
        } else {
          this.listQuery.periodCode = this.periodList.length > 0 ? this.periodList[0].id : ''
        }
      } else {
        this.listQuery.periodCode = ''
      }
      if (val === '3') {
        const prevSeason = getPrevSeason()
        const yearVal = prevSeason === '4' ? new Date().getFullYear() - 1 : new Date().getFullYear()
        if (this.yearArr.some(it => it == yearVal)) {
          this.listQuery.periodYear = String(yearVal)
          this.listQuery.quarter = prevSeason
        } else {
          this.listQuery.periodYear = this.yearArr.length > 0 ? this.yearArr[0] : ''
          this.listQuery.quarter = '1'
        }
      }
      if (val === '6') {
        const yearVal = new Date().getFullYear() - 1
        if (new Date().getMonth() < 6 && this.yearArr.some(it => it == yearVal)) {
          this.listQuery.periodYear = String(yearVal)
        } else {
          this.listQuery.periodYear = this.yearArr.length > 0 ? this.yearArr[0] : ''
        }
        this.listQuery.quarter = ''
      }
      if (val === 'C') {
        const yearVal = new Date().getFullYear() - 1
        if (this.yearArr.some(it => it == yearVal)) {
          this.listQuery.periodYear = String(yearVal)
        } else {
          this.listQuery.periodYear = this.yearArr.length > 0 ? this.yearArr[0] : ''
        }
        this.listQuery.quarter = ''
      }
      this.getData()
    },
    initYearArr() {
      var arr = []
      this.periodList.forEach(item => {
        arr.push(item.seasonCode.substring(0, 4))
      })
      this.yearArr = uniqueArr(arr)
    },
    getData() {
      this.listLoading = true
      getFlowData(this.listQuery).then((res) => {
        this.listLoading = false
        this.tableData = res.data.data
      }).catch(() => {
        this.listLoading = false
      })
    },
    exportBook() {
      exportFlowData(this.listQuery)
    },
    printBook() {
      printFlowData(this.listQuery).then(res => {
        window.open('http://' + window.location.host + res.data.data)
      }).catch(() => {
        this.listLoading = false
      })
    }

  }
}
</script>
<style scoped>
.label {
  text-align: right;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
}
</style>
